<template>
    <div id="header" :style="{position:'absolute'}">
        <div class="wrapper">
            <img src="@/service/logo.png" class="logo"/>
            <div class="nav">
                <b-nav>
                    <b-nav-item>
                        <router-link to="/" exact>
                            <span>首页</span>
                        </router-link>
                    </b-nav-item>
                    <b-nav-item class="product">
                        <router-link to="/product">
                           <span>全线产品</span>
                        </router-link>
                        <div class="list productList">
                            <ul>
                                <li v-for="(item,index) of imgList" :key="index"
                                @mouseenter = "productEnterList(index)"
                                @mouseleave = "productLeaveList(index)"
                                >
                                    <router-link :to="{path:item.route,query:{id:item.id}}">
                                        <img :src="item.url"/>
                                        <span :class="{hover:item.hover}">{{item.name}}</span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </b-nav-item>
                    <b-nav-item>
                         <router-link to="/customization">
                           <span>全屋定制</span>
                         </router-link>
                    </b-nav-item>
                    <b-nav-item >
                       <router-link to="/aboutus">
                           <span>关于我们</span>
                       </router-link>
                       <div class="list aboutList">
                            <ul>
                                <li v-for="(item,index) of aboutList" :key="index"
                                @mouseenter = "aboutEnterList(index)"
                                @mouseleave = "aboutLeaveList(index)">
                                    <router-link :to="item.route">
                                        <img :src="item.url"/>
                                        <span :class="{hover:item.hover}">{{item.name}}</span>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </b-nav-item>
                    <b-nav-form @submit="stop($event);toSearch()" :style="{position:'relative'}">
                        <input class="search" type="text" v-model='key'/>
                        <span  class="searchBtn"
                        @mouseenter = "mouseEnter('0')"
                        @mouseleave = "mouseLeave('0')">
                            <img :src="btnList[0].url" alt="" @click="toSearch()"/>
                        </span>
                    </b-nav-form>
                    <b-nav-item class="carts">
                        <div class="btnBox"
                        @mouseenter = "mouseEnter('1')"
                        @mouseleave = "mouseLeave('1')">
                            <span class="cartsBtn">
                                <router-link to="/cart"><img :src="btnList[1].url" alt=""></router-link>
                                <i class="cartCount" v-show="show" :class='{changeColor:changeColor}'>{{cartCount}}</i>
                            </span>
                        </div>
                    </b-nav-item>
                    <b-nav-item class="about">
                        <div class="btnBox personal">
                            <span class="aboutBtn"
                            @mouseenter = "uid=='-1' && mouseEnter('2')"
                            @mouseleave = "uid=='-1' && mouseLeave('2')">
                                <img :src="btnList[2].url" alt="">
                            </span>
                            <div class="personalnav">
                                <div v-if="!login" class="list aboutList">
                                    <p>
                                        <router-link to="/login">登录</router-link>
                                    </p>
                                    <p>
                                        <router-link to="/registor">注册</router-link>
                                    </p>
                                </div>
                                <div v-else class="list aboutList">
                                    <p>
                                        <router-link to="/personal">个人中心</router-link>
                                    </p>
                                    <p @click="exit();setUid('-1')" style="cursor:pointer">
                                        退出登录
                                    </p>
                                </div>
                            </div>
                        </div>
                    </b-nav-item>
                </b-nav>
            </div>
        </div>
    </div>
</template>

<script>
var path = require('path')
import {mapGetters,mapActions} from 'vuex';
export default {
    data(){
        return {
            addList: [
                {route:'/bed',url:require('@/icons/bed.png'),name:'床',activeUrl:require('@/icons/bed(2).png'),temp:'',hover:false},
                {route:'/cabinet',url:require('@/icons/cabinet.png'),name:'柜架',activeUrl:require('@/icons/cabinet(2).png'),temp:'',hover:false},
                {route:'/sofa',url:require('@/icons/sofa.png'),name:'沙发',activeUrl:require('@/icons/sofa(2).png'),temp:'',hover:false},
                {route:'/endtable',url:require('@/icons/endtable.png'),name:'茶几',activeUrl:require('@/icons/endtable(2).png'),temp:'',hover:false},
                {route:'/desk',url:require('@/icons/desk.png'),name:'书桌 · 餐桌',activeUrl:require('@/icons/desk(2).png'),temp:'',hover:false},
                {route:'/lamps',url:require('@/icons/lamp.png'),name:'灯具',activeUrl:require('@/icons/lamp(2).png'),temp:'',hover:false}
            ],
            imgList  : [],
            aboutList: [
                {route:'/cooperate',url:require('@/icons/cooperation.png'),name:'商务合作',activeUrl:require('@/icons/cooperation(2).png'),temp:'',hover:false},
                 {route:'/transport',url:require('@/icons/sign.png'),name:'配送验收',activeUrl:require('@/icons/sign(2).png'),temp:'',hover:false},
                  {route:'/aboutus',url:require('@/icons/connection.png'),name:'联系我们',activeUrl:require('@/icons/connection(2).png'),temp:'',hover:false},
                   {route:'/afterserver',url:require('@/icons/serve.png'),name:'售后服务',activeUrl:require('@/icons/serve(2).png'),temp:'',hover:false},
                    {route:'null',url:require('@/icons/appointment.png'),name:'预约设计师',activeUrl:require('@/icons/appointment(2).png'),temp:'',hover:false}
                ],
            btnList: [
                {route:'null',url:require('@/icons/search.png'),activeUrl:require('@/icons/search(2).png'),temp:''},
                 {route:'/cart',url:require('@/icons/cart.png'),activeUrl:require('@/icons/cart(2).png'),temp:''},
                  {route:'null',url:require('@/icons/preson.png'),activeUrl:require('@/icons/preson(2).png'),temp:require('@/icons/preson.png')},
                ],
            show: false,
            key : '',
            changeColor:false,
        }
    },
    methods: {
        ...mapActions(['checkLogin','setUid']),
        exit(){
            this.$router.push("/")
            this.checkLogin(false);
            this.$store.dispatch('setcartNum',0)
        },
        productEnterList(i){
            this.imgList[i].temp  = this.imgList[i].url
            this.imgList[i].url   = this.imgList[i].activeUrl
            this.imgList[i].hover = true
        },
        productLeaveList(i){
            this.imgList[i].url   = this.imgList[i].temp
            this.imgList[i].hover = false
        },
        aboutEnterList(i){
            this.aboutList[i].temp  = this.aboutList[i].url
            this.aboutList[i].url   = this.aboutList[i].activeUrl
            this.aboutList[i].hover = true
        },
        aboutLeaveList(i){
            this.aboutList[i].url   = this.aboutList[i].temp
            this.aboutList[i].hover = false
        },
        mouseEnter(i){
            this.btnList[i].temp = this.btnList[i].url
            this.btnList[i].url  = this.btnList[i].activeUrl
            this.changeColor     = true
        },
        mouseLeave(i){
            this.btnList[i].url = this.btnList[i].temp
            this.changeColor    = false
        },
        stop(evt){
            evt.preventDefault();
        },
        toSearch(){
            if(this.key!==''){
                this.$router.push({
                    path : '/list',
                    query: {
                        key: this.key
                    }
                })
            }
        },
    },
    computed: {
        ...mapGetters({
            cartCount: 'cartNum',
            uid      : 'uid',
            login    : 'login'
        })
    },
    beforeMount() {
        var id = this.$store.state.uid
        this.axios({
            url   : `${this.$config.dataUrl}/api/v1/categories/list`,
            method: 'get'
        }).then(res=>{
            for(var i in this.addList ){
                this.imgList.push(Object.assign({},this.addList[i],res.data.data[i]))
            }
        })
    },
    watch:{
        cartCount:{
            immediate: true,
            handler(nv,ov){
                if(nv!==0){
                    this.show = true
                }else{
                    this.show = false
                }
            }
        },
        uid:{
            immediate: true,
            handler(nv,ov){
                if(nv!=='-1'){
                    this.btnList[2].url  = this.btnList[2].activeUrl
                }else{
                    this.btnList[2].url = this.btnList[2].temp
                }
            }
        },
        addList:{
            handler(nv,ov){
                this.imgList = nv
            }
        },
        $route( to , from ){
            if(to.path!=='/list'){
                this.key = ''
            }
        },

    }
}
</script>

<style scoped lang="scss">
.personal:hover .personalnav{
        display: block
    }
    .personal .list{
        width     : .8rem;
        left      : -.2rem;
        padding   : 0;
        text-align: center;
        top: .15rem;
    }
   .personal .list .router-link-active{
       position: static;
        text-align: center;
        display: block;
    }
    .personal p{
        padding: 0;
        margin : 0;
    }
    .personal p:hover{
        background-color: #ccc;
    }
    .personal:hover .list{
        height: 0.85rem !important;
    }
    .personalnav{
        // display:none;
        top     : 0.43rem;
        position: absolute
    }
    @mixin bg_position($left, $top) {
        background: url(../../assets/img/icons/sprite1.png) #{$left}px #{$top}px;
    };


    @mixin clearfix() {
        &::after {
            display: block;
            clear  : both;
            content: '';
        }
    }
    @mixin wrapperStyle{
        width   : 12rem;
        margin  : 0 auto;
        position: relative;
        @include clearfix();
    }
    .active{
        color: #B49D7E
    }

    #header{
        right      : 0;
        margin-top : 0.44rem;
        width      : 100%;
        font-size  : 0.24rem;
        font-weight: 500;
        z-index    : 999;
        a{
            color: #434343
        }
        .wrapper{
            @include wrapperStyle()
        }
        .logo{
            float  : left;
            width  : 1.34rem;
            height : 0.43rem;
            display: block;
        }
        .nav{
            float      : right;
            line-height: 0.43rem;
            height     : 0.43rem;
            .nav-item{
                width : 1.3rem;
                height: 0.43rem;
            }
            .nav-link{
                padding       : 0;
                line-height   : 0.43rem;
                height        : 0.43rem ;
                padding-bottom: 0.15rem;
                box-sizing    : content-box;
                text-align    : center;
                &>.router-link-active{
                    position  : relative;
                    text-align: center;
                    display   : flex;
                    span{
                        display        : flex;
                        width          : 100%;
                        text-align     : center;
                        justify-content: center;
                        flex-direction : column;
                        align-items    : center;
                        color          : #B49D7E;
                    }
                    :after{
                        position        : absolute;
                        content         : '';
                        bottom          : -0.15rem;
                        display         : inline-block;
                        width           : 30%;
                        height          : 0.03rem;
                        background-color: #B49D7E;
                    }
                }
            }
            .nav-link:hover .list{
                height: 1rem;
            }
        }
    }
    .list{
        position        : absolute;
        width           : 100vw;
        height          : 0;
        left            : 0;
        top             : 0.4rem;
        background-color: #ffffff;
        opacity         : 0.75;
        box-sizing      : border-box;
        font-size       : 0.14rem;
        top             : 0.58rem;
        left            : -3.6rem;
        cursor          : auto;
        overflow        : hidden;
        transition      : height 0.9s;
        z-index         : 999;
        .router-link-active{
            position  : relative;
            text-align: center;
            display   : flex;
            span{
                display        : flex;
                width          : 100%;
                text-align     : center;
                justify-content: center;
                flex-direction : column;
                align-items    : center;
                color          : #B49D7E;
            }
        }
        ul{
            position: relative;
        }
        li{
            list-style     : none;
            float          : left;
            margin-left    : .2rem;
            font-size      : 0.14rem;
            height         : 1rem;
            display        : flex;
            align-items    : center;
            justify-content: center;
            width          : 0.9rem;
            a{
                display       : flex;
                flex-direction: column;
                text-align    : center;
                img{
                    margin: 0 auto;
                }
                span{
                    padding    : 0;
                    line-height: 0.25rem;
                }
            }
            .hover{
                color: #B49D7E
            }
        }
    }
    .productList{
        ul{
            left: 5.8rem;
            img{
                width : 20px;
                height: 20px;
                margin: 0 auto;
            }
        }
    }
    .aboutList{
        ul{
            left: 8.61rem;
            img{
                width : 0.35rem;
                height: 0.3rem;
                margin: 0 auto;
            }
            li{
                width: 1rem
            }
        }
    }
    .search{
        border-radius   : 0.15rem;
        height          : 0.3rem;
        width           : 1.5rem;
        outline         : none;
        border          : 1px solid #000;
        background-color: rgba(255,255,255,0.6);
        text-indent     : 0.1rem;
        font-size       : 0.12rem;
    }
    @mixin navBtn{
        outline: none;
        cursor : pointer;
        border : 0;
        height : 20px;
        width  : 20px;
        img{
            width  : 100%;
            height : 100%;
            display: block
        }
    }
    .searchBtn{
        @include navBtn;
        margin-left: 0.09rem;
    }
    .btnBox{
        width      : 0.6rem;
        margin     : 0 0.2rem;
        height     : 0.43rem;
        display    : flex;
        align-items: center;
    }
    .carts{
        width: 0.5rem !important;
        .cartsBtn{
            @include navBtn;
            display : block;
            position: relative;
        }
        .cartCount{
            width           : 0.2rem;
            height          : 0.2rem;
            line-height     : 0.2rem;
            border-radius   : 50%;
            background-color: rgba(67,67,67,1);
            color           : #ffffff;
            font-size       : 0.1rem;
            text-align      : center;
            position        : absolute;
            top             : -0.1rem;
            right           : -0.1rem;
            font-style      : normal
        }
        .changeColor{
            background-color: #B49D7E;
        }
    }
    .about{
        width: 0.5rem !important;
        .aboutBtn{
            @include navBtn;
            display: block;
        }
    }



</style>
